<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
    <link rel='stylesheet' href='./luckysheet/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='./luckysheet/plugins/plugins.css' />
    <link rel='stylesheet' href='./luckysheet/css/luckysheet.css' />
    <link rel='stylesheet' href='./luckysheet/assets/iconfont/iconfont.css' />
    <script src="./luckysheet/plugins/js/plugin.js"></script>
    <script src="./luckysheet/luckysheet.umd.js"></script>
    <script src="./xlsx.full.min.js"></script>
    <script src="./polyfill.js"></script>
    <script src="./exceljs.js"></script>
    <script src="./fileSaver.js"></script>
    <script>
        $(function () {
            //Configuration item
            var options = {
                container: 'luckysheet', //luckysheet is the container id
                showinfobar: false,
            }
            luckysheet.create(options)
        });
    </script>
</head>

<body>
    <div id="lucky-mask-demo"
        style="position: absolute;z-index: 1000000;left: 0px;top: 0px;bottom: 0px;right: 0px; background: rgba(255, 255, 255, 0.8); font-size: 40px;align-items:center;justify-content: center;display: none;">
        Downloading</div>
    <p> 
        <input style="font-size:16px;display: none;" type="file" id="Luckyexcel-demo-file"
            name="Luckyexcel-demo-file" change="demoHandler" />
            <button id="Lucky" >预览</button>
            <!-- <select
            style="height: 27px;top: -2px;position: relative;" id="Luckyexcel-select-demo">
            <option value="">select a demo</option>
            <option value="http://192.168.1.182:8180/uploadFile/2020/10/20/1603176815594.xlsx">Money Manager.xlsx
            </option>
            <option value="https://minio.cnbabylon.com/public/luckysheet/Activity%20costs%20tracker.xlsx">Activity costs
                tracker.xlsx</option>
            <option value="https://minio.cnbabylon.com/public/luckysheet/House%20cleaning%20checklist.xlsx">House
                cleaning checklist.xlsx</option>
            <option value="https://minio.cnbabylon.com/public/luckysheet/Student%20assignment%20planner.xlsx">Student
                assignment planner.xlsx</option>
            <option value="https://minio.cnbabylon.com/public/luckysheet/Credit%20card%20tracker.xlsx">Credit card
                tracker.xlsx</option>
            <option value="https://minio.cnbabylon.com/public/luckysheet/Blue%20timesheet.xlsx">Blue timesheet.xlsx
            </option>
            <option value="https://minio.cnbabylon.com/public/luckysheet/Student%20calendar%20%28Mon%29.xlsx">Student
                calendar (Mon).xlsx</option>
            <option value="https://minio.cnbabylon.com/public/luckysheet/Blue%20mileage%20and%20expense%20report.xlsx">
                Blue mileage and expense report.xlsx</option>
        </select>  -->
        <!-- <a href="javascript:void(0)" id="Luckyexcel-downlod-file">Download source xlsx file</a>
        <button class="excelexport">下载excel</button> -->
    </p>
    <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;left: 0px;top: 50px;bottom: 0px;">
    </div>
    
    <script src="luckyexcel.js"></script>
    <!-- <script type="module" src="index.js"></script> -->
    <!-- <script type="module">
            // import {importFile} from './main';
            window.onload = () => {
                let upload = document.getElementById("file");
                upload.addEventListener("change", function(evt){
                    var files = evt.target.files;   
                    importFile(files[0]);
                });
            }
        </script> -->
    <script>
       
        let exportBtn = document.querySelector('#Lucky')
        exportBtn.addEventListener("click",importJsonData)
        function importJsonData(arr) {
    var data = [
        { "name": "John", "city": "Seattle" },
        { "name": "Mike", "city": "Los Angeles" },
        { "name": "Zach", "city": "New York" }
    ];

    /* 创建worksheet */
    var ws = XLSX.utils.json_to_sheet(data);

    /* 新建空workbook，然后加入worksheet */
    var wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "People");

    /* 生成xlsx文件 */
    // XLSX.writeFile(wb, "sheetjs.xlsx");
    var data = XLSX.utils.sheet_to_html(ws);
    /* 调用数据转换方法将数据格式转换成Luckysheet格式*/
    readFile(data);}
    
        // exportBtn.addEventListener("click", exportFile)
        //导出Excel
        function exportFile(type) {
            let allSheetData = luckysheet.getLuckysheetfile();
            
            exportExcel(allSheetData, ExcelJS)
            function exportExcel(luckysheet, Excel) { // 参数为luckysheet.getluckysheetfile()获取的对象
                // 1.创建工作簿，可以为工作簿添加属性
                const workbook = new Excel.Workbook()
                // 2.创建表格，第二个参数可以配置创建什么样的工作表
                luckysheet.every(function (table) {
                    if (table.data.length === 0) return true
                    const worksheet = workbook.addWorksheet(table.name)
                    // 3.设置单元格合并,设置单元格边框,设置单元格样式,设置值
                    setStyleAndValue(table.data, worksheet)
                    setMerge(table.config.merge, worksheet)
                    setBorder(table.config.borderInfo, worksheet)
                    return true
                })
                // 4.写入 buffer
                const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
                workbook.xlsx.writeBuffer().then((data => {
                    const blob = new Blob([data], { type: EXCEL_TYPE })
                    saveAs(blob, 'download.xlsx')
                }))
            }}
            function readFile(txtdata) {
            $("#luckysheet-copy-content").html(txtdata);
            var data = new Array($("#luckysheet-copy-content").find("table tr").length);
            var colLen = 0;
            $("#luckysheet-copy-content").find("table tr").eq(0).find("td").each(function () {
                var colspan = parseInt($(this).attr("colspan"));
                if (isNaN(colspan)) {
                    colspan = 1;
                }
                colLen += colspan;
            });

            for (var i = 0; i < data.length; i++) {
                data[i] = new Array(colLen);
            }

            var r = 0;
            var borderInfo = {};
            var luckysheet_select_save = luckysheet.getluckysheet_select_save();

            $("#luckysheet-copy-content").find("table tr").each(function () {
                var $tr = $(this);
                var c = 0;
                $tr.find("td").each(function () {
                    var $td = $(this);
                    var cell = {};
                    var txt = $td.text();

                    if ($.trim(txt).length == 0) {
                        cell.v = null;
                        cell.m = "";
                    }
                    // else {
                    //     var mask = luckysheet.mask.genarate($td.text());
                    //     cell.v = mask[2];
                    //     cell.ct = mask[1];
                    //     cell.m = mask[0];
                    // }

                    var bg = $td.css("background-color");
                    if (bg == "rgba(0, 0, 0, 0)") {
                        bg = "rgba(255,255,255)";
                    }

                    cell.bg = bg;

                    var bl = $td.css("font-weight");
                    if (bl == 400 || bl == "normal") {
                        cell.bl = 0;
                    }
                    else {
                        cell.bl = 1;
                    }

                    var it = $td.css("font-style");
                    if (it == "normal") {
                        cell.it = 0;
                    }
                    else {
                        cell.it = 1;
                    }

                    var ff = $td.css("font-family");
                    var ffs = ff.split(",");
                    for (var i = 0; i < ffs.length; i++) {
                        var fa = $.trim(ffs[i].toLowerCase());
                        fa = luckysheet.menuButton.fontjson[fa];
                        if (fa == null) {
                            cell.ff = 0;
                        }
                        else {
                            cell.ff = fa;
                            break;
                        }
                    }

                    var fs = Math.floor(parseInt($td.css("font-size")) * 72 / luckysheet.dpi_y) + 1;
                    cell.fs = fs;

                    var fc = $td.css("color");

                    cell.fc = fc;

                    var ht = $td.css("text-align");
                    if (ht == "center") {
                        cell.ht = 0;
                    }
                    else if (ht == "right") {
                        cell.ht = 2;
                    }
                    else {
                        cell.ht = 1;
                    }

                    var vt = $td.css("vertical-align");
                    if (vt == "middle") {
                        cell.vt = 0;
                    }
                    else if (vt == "top" || vt == "text-top") {
                        cell.vt = 1;
                    }
                    else {
                        cell.vt = 2;
                    }

                    while (c < colLen && data[r][c] != null) {
                        c++;
                    }

                    if (c == colLen) {
                        return true;
                    }

                    if (data[r][c] == null) {
                        data[r][c] = cell;
                        var rowspan = parseInt($td.attr("rowspan"));
                        var colspan = parseInt($td.attr("colspan"));

                        if (isNaN(rowspan)) {
                            rowspan = 1;
                        }

                        if (isNaN(colspan)) {
                            colspan = 1;
                        }


                        var r_ab = luckysheet_select_save[0]["row"][0] + r;
                        var c_ab = luckysheet_select_save[0]["column"][0] + c;
                        for (var rp = 0; rp < rowspan; rp++) {
                            for (var cp = 0; cp < colspan; cp++) {
                                if (rp == 0) {
                                    var bt = $td.css("border-top");
                                    if (bt != null && bt.length > 0 && bt.substr(0, 3).toLowerCase() != "0px") {
                                        var width = $td.css("border-top-width");
                                        var type = $td.css("border-top-style");
                                        var color = $td.css("border-top-color");
                                        var borderconfig = luckysheet.menuButton.getQKBorder(width, type, color);

                                        if (borderInfo[(r + rp) + "_" + (c + cp)] == null) {
                                            borderInfo[(r + rp) + "_" + (c + cp)] = {};
                                        }

                                        borderInfo[(r + rp) + "_" + (c + cp)].t = { "style": borderconfig[0], "color": borderconfig[1] };
                                    }
                                }

                                if (rp == rowspan - 1) {
                                    var bb = $td.css("border-bottom");
                                    if (bb != null && bb.length > 0 && bb.substr(0, 3).toLowerCase() != "0px") {
                                        var width = $td.css("border-bottom-width");
                                        var type = $td.css("border-bottom-style");
                                        var color = $td.css("border-bottom-color");
                                        var borderconfig = luckysheet.menuButton.getQKBorder(width, type, color);

                                        if (borderInfo[(r + rp) + "_" + (c + cp)] == null) {
                                            borderInfo[(r + rp) + "_" + (c + cp)] = {};
                                        }

                                        borderInfo[(r + rp) + "_" + (c + cp)].b = { "style": borderconfig[0], "color": borderconfig[1] };
                                    }
                                }

                                if (cp == 0) {
                                    var bl = $td.css("border-left");
                                    if (bl != null && bl.length > 0 && bl.substr(0, 3).toLowerCase() != "0px") {
                                        var width = $td.css("border-left-width");
                                        var type = $td.css("border-left-style");
                                        var color = $td.css("border-left-color");
                                        var borderconfig = luckysheet.menuButton.getQKBorder(width, type, color);

                                        if (borderInfo[(r + rp) + "_" + (c + cp)] == null) {
                                            borderInfo[(r + rp) + "_" + (c + cp)] = {};
                                        }

                                        borderInfo[(r + rp) + "_" + (c + cp)].l = { "style": borderconfig[0], "color": borderconfig[1] };
                                    }
                                }

                                if (cp == colspan - 1) {
                                    var br = $td.css("border-right");
                                    if (br != null && br.length > 0 && br.substr(0, 3).toLowerCase() != "0px") {
                                        var width = $td.css("border-right-width");
                                        var type = $td.css("border-right-style");
                                        var color = $td.css("border-right-color");
                                        var borderconfig = luckysheet.menuButton.getQKBorder(width, type, color);

                                        if (borderInfo[(r + rp) + "_" + (c + cp)] == null) {
                                            borderInfo[(r + rp) + "_" + (c + cp)] = {};
                                        }

                                        borderInfo[(r + rp) + "_" + (c + cp)].r = { "style": borderconfig[0], "color": borderconfig[1] };
                                    }
                                }

                                if (rp == 0 && cp == 0) {
                                    continue;
                                }
                                data[r + rp][c + cp] = { "mc": { "r": r_ab, "c": c_ab } };
                            }
                        }

                        if (rowspan > 1 || colspan > 1) {
                            var first = { "rs": rowspan, "cs": colspan, "r": r_ab, "c": c_ab };
                            data[r][c].mc = first;
                        }
                    }

                    c++;

                    if (c == colLen) {
                        return true;
                    }
                });

                r++;
            });

            var index = luckysheet.sheetmanage.getSheetIndex(luckysheet.currentSheetIndex);
            var file = luckysheet.getluckysheetfile()[index];
            var luckysheet_selection_range = file["luckysheet_selection_range"];
            luckysheet_selection_range = [];
            luckysheet.selection.pasteHandler(data, borderInfo);
            $("#luckysheet-copy-content").empty();
        }
            
    </script>
</body>

</html>